<template>
  <div>
    <!-- 列表数据 -->
    <div>
      <div style="float: left">
        <el-button
          type="primary"
          color="#ea5b24"
          @click="addNote()"
          v-if="pinia.isShow[62]"
          >添加</el-button
        >
      </div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="sort" width="60" label="排序" />
        <el-table-column prop="title" width="300" label="主标题" />
        <el-table-column prop="introduce" width="650" label="副标题" />
        <el-table-column prop="forbiddenType" label="状态">
          <template #default="scope">
            {{ scope.row.forbiddenType == 0 ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template v-slot:default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="editNote(scope.row)"
              v-if="pinia.isShow[63]"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="disable(scope.row)"
              v-if="pinia.isShow[64]"
            >
              {{ scope.row.forbiddenType == 0 ? "禁用" : "启用" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--添加/编辑管理员表单 -->
      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        center="true"
        modal="true"
        width="25%"
        class="el-dialog-data"
      >
        <el-form :model="model.data">
          <el-form-item label="主标题:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 3 }"
              v-model.trim="model.title"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="副标题:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 3 }"
              v-model.trim="model.introduce"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="排序:">
            <el-input
              v-model="model.sort"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" color="#ea5b24" @click="formSubmit()"
              >保存</el-button
            >
          </span>
        </template>
      </el-dialog>

      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  findServiceNoteApi,
  addServiceNoteApi,
  editServiceNoteApi,
  batchServiceNoteApi,
} from "../../../api/index";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 控制添加/编辑对话框
const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogType = ref(0);

//添加编辑模型
const model: any = reactive({
  id: 0,
  introduce: "",
  sort: "",
  title: "",
});

// 翻页
const handleCurrentChange = (val: number) => {
  page.value = val;
  searchNote();
};

// 添加角色点击事件
const addNote = () => {
  dialogTitle.value = "添加";
  dialogType.value = 0;
  dialogVisible.value = true;
  Object.keys(model).forEach((key) => (model[key] = ""));
};

// 编辑角色点击事件
const editNote = (row) => {
  dialogTitle.value = "编辑";
  dialogType.value = 1;
  dialogVisible.value = true;

  model.id = row.id;
  model.introduce = row.introduce;
  model.sort = row.sort;
  model.title = row.title;
};

// 查询车主页面配置
const searchNote = () => {
  findServiceNoteApi({ page: page.value, size: size }).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.data;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

/**
 * 添加/编辑
 */
const formSubmit = () => {
  if (!model.title) {
    ElMessage.error("请输入主标题.");
    return;
  }
  if (!model.introduce) {
    ElMessage.error("请输入副标题.");
    return;
  }
  if (dialogType.value === 0) {
    model.sort = Number(model.sort);
    addServiceNoteApi(model).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "添加成功.",
          type: "success",
        });
        searchNote();
      } else {
        ElMessage.error("添加失败");
      }
    });
  } else {
    editServiceNoteApi(model).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "编辑成功.",
          type: "success",
        });
        searchNote();
      } else {
        ElMessage.error("编辑失败");
      }
    });
  }
  Object.keys(model).forEach((key) => (model[key] = ""));
  dialogVisible.value = false;
};

// 禁用服务说明
const disable = (row) => {
  batchServiceNoteApi({
    ids: [row.id],
    state: Number(!row.forbiddenType),
  }).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "成功.",
        type: "success",
      });
      searchNote();
    } else {
      ElMessage.error("失败");
    }
  });
};

onMounted(() => {
  searchNote();
});
</script>
<style lang="less">
.el-dialog-data {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
</style>
